<template>
	<view class="evaluate">
		<!-- 发表评价 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">发表评价</text>
			</view>
		</u-navbar>
		<view
			class="set-data-container w-750 b-box d-flex flex-c ali-i-c just-sw po-re"
			style="background: #F0F1F5;"
			:style="{ height: containerHeight }"
		>
			<view style="padding:0 32rpx;margin-top: 20rpx;margin-bottom: 20rpx;">
				<view class="d-flex flex-c b-box w-100" style="background: #F0F1F5;">
					<view
						style="height: 92rpx;border-bottom: 1rpx solid #eeeeee;padding: 0 32rpx;"
						class="w-100 b-box d-flex flex-r ali-i-c just-s bg-ff"
					>
						<text class="pf-sc fw-400 c-333 " style="font-size: 28rpx;">
							订单编号：{{ data.orderno }}
						</text>
					</view>
					<view
						style="height: 220rpx;padding: 30rpx 32rpx ;"
						class=" b-box d-flex flex-r ali-i-c bg-ff w-100"
					>
						<view
							style="width:140rpx ;height:140rpx;margin-right: 16rpx;border-radius:16rpx;overflow: hidden;"
							class="b-box"
						>
							<image :src="data.catimage" style="width:140rpx ;height:140rpx"></image>
						</view>
						<!--  -->
						<view
							style="width: 520rpx;height: 140rpx;"
							class="b-box d-flex flex-c ali-i-s just-s bg-ff"
						>
							<view class="d-flex flex-r ali-i-c just-sw b-box w-100" style="margin-bottom: 8rpx;">
								<text class="fw-500 pf-sc c-333 fz-32 text-ep-1" style="width: 300rpx;">
									{{ data.catname }}
								</text>
							</view>
							<view
								class="d-flex flex-c ali-i-s just-s b-box"
								style="min-height: 70rpx;width: inherit;padding-right: 26rpx;"
							>
								<view class="w-100 b-box d-flex flex-r ali-i-c just-sw">
									<text
										class="pf-sc fw-300"
										style="font-size: 22rpx;color: #999999;margin-bottom: 26rpx;"
									>
										{{ data.cardetail }}
									</text>
								</view>
								<view class="b-box d-flex flex-r ali-i-c just-s">
									<text class="pf-sc fw-500 po-re" style="font-size: 22rpx;color: #FF5C00;top:2rpx">
										¥
									</text>
									<text class="pf-sc fw-600" style="font-size: 28rpx;color: #FF5C00;">
										{{ data.money }}
									</text>
								</view>
							</view>
						</view>
						<!--  -->
					</view>
					<!--  -->
					<view
						class="w-750 b-box d-flex flex-c ali-i-s just-s bg-ff"
						style="padding: 0 32rpx 36rpx 36rpx;margin-top: 20rpx;margin-bottom: 60rpx;"
					>
						<view
							style="height: 92rpx;border-bottom: 1rpx solid #eeeeee;padding: 0 32rpx;margin-bottom: 42rpx;"
							class="w-100 b-box d-flex flex-r ali-i-c just-s bg-ff"
						>
							<text class="pf-sc fw-400 c-333 " style="font-size: 28rpx;">订单评价</text>
						</view>
						<view style="height: 126rpx;" class="d-flex flex-r ali-i-c just-s">
							<text
								class="pf-sc fw-500 "
								style="font-size: 30rpx;color: #262626;margin-right: 24rpx;"
							>
								满意度
							</text>
							<u-rate
								:count="5"
								size="43rpx"
								gutter="14"
								minCount="1"
								inactiveColor="#999999"
								activeColor="#F3B100"
								v-model="rateVal"
							></u-rate>
							<text
								class="pf-sc fw-400"
								style="font-size: 30rpx;color: #999999;margin-left: 20rpx;"
							>
								{{ rateVal }}.0
							</text>
						</view>
						<view class="d-flex flex-r ali-i-c just-s bg-ff flex-wp w-100">
							<view class="filter-body-section-body style-flex style-flex-wrap" style="width: 100%;margin: 0 auto;">
								<axb-check-box
									ref="radio3"
									style="margin: 20rpx;"
									:list="sartTime"
									@change="radioChangeType"
									:multi="true"
								></axb-check-box>
							</view>
						</view>
					</view>
					<view class="w-750 b-box  d-flex flex-r ali-i-c just-c">
						<u-button
							:throttleTime="700"
							@click="Submit"
							:customStyle="{
								height: '88rpx',
								width: '670rpx',
								font: '400 32rpx PingFang SC',
								color: '#ffffff',
								borderWidth: '0rpx',
								background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
								borderRadius: '44rpx'
							}"
							shape="square"
							text="提交"
						></u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import axbCheckBox from '../components/axb-checkbox/axb-checkbox.vue';
import { evaluate } from '@/common/api.js';
import { _containerHeight } from '@/utils/GetSys.js';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import uTextarea from '../components/uview-ui/components/u-textarea/u-textarea';
import uRate from '../components/uview-ui/components/u-rate/u-rate';
export default {
	components: {
		'u-textarea': uTextarea,
		'u-rate': uRate,
		'u-navbar': Unavbar,
		axbCheckBox
	},
	data() {
		return {
			containerHeight: '',
			rateVal: 1,
			list: [],
			current: -1,
			item: '',
			data: '',
			sartTime: [
				{
					name: '服务专业',
					value: '服务专业',
					checked: 0
				},
				{
					name: '态度好',
					value: '态度好',
					checked: 0
				},
				{
					name: '清洗干净',
					value: '清洗干净',
					checked: 0
				},
				{
					name: '效率高',
					value: '效率高',
					checked: 0
				}
			]
		};
	},
	methods: {
		radioChangeType(val) {
			this.list=val
			// console.log(this.list);
		},
		Submit() {
			let params = {
				token: uni.getStorageSync('usertoken'),
				id: this.data.id,
				star: this.rateVal,
				content: this.list.join(',')
			};
			console.log(params,'params');
			if (params.content === '') {
				uni.showToast({
					title: '评价不能为空',
					icon: 'none'
				});
				return;
			}
			evaluate(params).then(res => {
				if (res.data.code === 1) {
					uni.showToast({
						title: '评论成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.switchTab({
							url:'/pages/UserCenter/UserCenter'
						})
					}, 1000);
				}
			});
		},
		addClass(item, index) {
			// console.log(item, index);
			if (this.current != index) {
				this.current = index;
				this.item = item;
			} else {
				this.current = -1;
				this.item = '';
			}
		}
	},
	onLoad(options) {
		this.containerHeight = _containerHeight();
		this.data = options;
		console.log(options);
	}
};
</script>

<style lang="scss">
.evaluate {
	.vv {
		width: 184rpx;
		height: 68rpx;
		border-radius: 8rpx;
		border: 2rpx solid #dddddd;
		margin-right: 24rpx;
		margin-bottom: 24rpx;
		background: #f7f8f9;
		.texta {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
	.active-list {
		background-color: #bfa;
	}
	.radio {
		margin-left: 20rpx !important;
	}
	.radio:nth-child(4){
		margin-right: 0;
	}
}
</style>
